<!--
 * @FileDescription 应用界面
 * @Author 杨宇翔
 * @Date 20220705 15:06:24
 * @LastEditors 杨宇翔
 * @LastEditTime 20220705 15:06:24
-->
<template>
    <div class="use-page">
        <UseBasicInformation class="basic-information" />
        <UseExtensionInformation class="extension-information" />
        <UseEnvironmentInformation class="environment-information" />
        <UseOptions class="options" />

        <InertialNavigationNav />
        <InertialNavigationHeader />

        <UseGPSLocation />
        <UseTracePlot />
    </div>
</template>

<script setup lang="ts">
import InertialNavigationHeader from './InertialNavigationHeader.vue';
import InertialNavigationNav from './InertialNavigationNav.vue';
import UseBasicInformation from './UseBasicInformation.vue';
import UseEnvironmentInformation from './UseEnvironmentInformation.vue';
import UseExtensionInformation from './UseExtensionInformation.vue';
import UseGPSLocation from './UseGPSLocation.vue';
import UseOptions from './UseOptions.vue';
import UseTracePlot from './UseTracePlot.vue';
</script>

<style scoped>
.use-page {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    background-color: #2D2E3A;

    display: grid;
    grid-template-columns: 6fr 2fr 2fr;
    grid-template-rows: 22fr 3fr;
    gap: 0.1rem;
    grid-template-areas: 'basic extension environment'
        'basic extension options';
}
</style>